import React from "react";

const Info = () => {
    // 获取登录信息
    let Login = React.$Cookies.load('LoginAuth') ? React.$Cookies.load('LoginAuth') : {}
    const [LoginAuth, setLoginAuth] = React.useState(Login)

    // 初始化路由跳转对象
    const navigate = React.$Router.useNavigate()

    // 获取当前位置的 URL 中的查询参数
    const [searchParams, setSearchParams] = React.$Router.useSearchParams()

    // 将参数中名为 'proid' 的值存储在React状态中
    const [proid, setProid] = React.useState(searchParams.get('proid'))

    // 收藏状态
    const [collection, setCollection] = React.useState(false)

    const [product, setProduct] = React.useState({})

    const onBack = () => {
        navigate(-1)
    }

    // 请求商品数据
    const getProductData = async () => {
        const data = {
            proid,
            busid: LoginAuth.id
        }
        let result = await React.$Api.ProductInfo(data)
        // console.log(result);
        if (result.code === 1) {
            setProduct(result.data.info)
            setCollection(result.data.Collection)
        }
    }

    // 收藏以及取消收藏的方法
    const onConfirm = async () => {
        const data = {
            busid: Login.id,
            proid: parseInt(proid)
        }
        // console.log(data);
        const result = await React.$Api.ProductCollection(data)

        if (result.code === 0) {
            React.$Vant.Toast.fail('操作失败')
        }

        // if (result.code === 1 ) {
        if (result.data.status === true) {
            setCollection(true)
            React.$Vant.Toast.success('收藏成功')
        } else {
            setCollection(false)
            React.$Vant.Toast.success('取消收藏成功')
        }
        // }
    }

    // 立即租赁
    const LeaseNow = (product) => {
        React.$Cookies.save('Product', product, { path: '/' })
        navigate('/lease/lease/add')
    }

    React.useEffect(() => {
        getProductData()
    }, [])

    const Nav = () => {
        return (
            <React.$Vant.Sticky>
                <React.$Vant.NavBar
                    title='商品详情'
                    leftText='返回'
                    onClickLeft={onBack}
                />
            </React.$Vant.Sticky>
        )
    }

    // 收藏按钮组件
    const Collection = () => {
        if (JSON.stringify(LoginAuth) !== '{}') {
            if (collection) {
                return (
                    <>
                        <a onClick={onConfirm}>
                            <React.$Icons.Star fontSize='2em' color='#ffb2c3' />
                            <span>已收藏</span>
                        </a>
                    </>
                )
            } else {
                return (
                    <>
                        <a onClick={onConfirm}>
                            <React.$Icons.StarO fontSize='2em' color='#ffb2c3' />
                            <span>收藏</span>
                        </a>
                    </>
                )
            }
        }
    }

    const Footer_rent = () => {
        return (
            <div className="zy_goods_foot dis_flex">
                <div className="left">
                    <React.$Router.NavLink to={"/"}>
                        <React.$Icons.WapHomeO fontSize='2em' color='#ffb2c3' />
                        <span>首页</span>
                    </React.$Router.NavLink>
                    <Collection />
                </div>
                <p><a onClick={() => LeaseNow(product)}>立即租赁</a></p>
            </div>
        )
    }
    return (
        <>
            <Nav />

            <div className="banner_shouy">
                <div className="swiper-wrapper">
                    <div className="swiper-slide"><img src={product.cover_cdn} /></div>
                </div>
            </div>
            <div className="top_title">
                <h2>{product.name}</h2>
                <div className="money">
                    <h3>￥{product.rent_price}</h3>
                    <p>押金:￥{product.rent}</p>
                </div>
                <div className="youhuiq common">
                    <div className="text">
                        <h2>保障</h2>
                        <div className="tb">
                            <div className="tis_fuwu">
                                <ul>
                                    <li className="no">保障</li>
                                    <li>保障</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div className="youhuiq common common_no">
                    <div className="text">
                        <h2>配送</h2>
                        <div className="tb">
                            送货上门
                        </div>
                    </div>
                </div>
            </div>

            <Footer_rent />

        </>
    )
}

export default Info